<template>
  <div class="searchFormData">
    <el-form ref="ruleForm" :model="formData" :rules="rules">
      <el-form-item label="门店">
        <el-select v-model="formData.shopId" placeholder="请选择" size="small">
          <el-option
            v-for="item in shopList"
            :key="item.shopId"
            :label="item.name"
            :value="item.shopId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="资源名称" prop="name">
        <el-input v-model="formData.name" clearable placeholder="请输入资源名称" size="small" />
      </el-form-item>
      <el-form-item>
        <div>
          <el-button type="primary" size="small" round @click="search">查询</el-button>
          <el-button size="small" round @click="reset">重置</el-button>
        </div>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { LIST_STATE_OPTIONS } from '@/views/wxaReservationModule/views/resourceManage/config'
import { storeList } from '@/api/reservation'
export default {
  name: 'Index',
  props: {
  },
  data() {
    return {
      rules: {},
      LIST_STATE_OPTIONS,
      shopList: [],
      formData: {
        status: '',
        shopId: '',
        name: ''
      }
    }
  },
  watch: {},
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const { code, data } = await storeList()
      if (code === 0) {
        this.shopList = [{ name: '全部', shopId: '' }, ...data]
      }
    },
    search() {
      this.$emit('search', this.formData)
    },
    reset() {
      this.$refs.ruleForm.resetFields()
      this.$refs.ruleForm.clearValidate()
      this.formData = {
        status: '',
        shopId: '',
        name: ''
      }
      this.$emit('reset', this.formData)
    }
  }
}
</script>

<style scoped lang="scss">
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item {
  width: 300px;
  .el-select,
  .el-input {
    width: 70%;
  }
}
</style>
